// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.nav2-header {
  @_top: nav2-header;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: @z-index--nav-bar;

  &__body {
    width: 100%;
    z-index: 1; // local to its block element
    position: relative;
  }

  &__menu-bg {
    .full-size();
    height: @nav2-header-image-height;
    background-color: fade(#111, 90%);
    transition-duration: 0s;
    border-bottom: 1px solid @osu-colour-h1;

    &[data-visibility="hidden"] {
      transition-duration: 250ms;
    }
  }

  &__transition-overlay {
    .full-size();
    background-color: @osu-colour-h2;
    opacity: 0;
    transition: opacity var(--header-pinned-animation-duration);

    .@{header-pinned} & {
      opacity: 1;
    }
  }

  &__triangles {
    .full-size();
    background-image: url("~@images/layout/nav2-background-hue0.png");
    background-position: bottom center;
    background-repeat: repeat-x;
    filter: hue-rotate(var(--base-hue-deg)) saturate(0.6);
  }
}
